// 注册tabs

import React, {Component} from 'react';
import HomePage from "../home/HomePage";
import {Image, StyleSheet} from "react-native";
import ShopPage from "./ShopPage";
import MinePage from "./MinePage";
import MorePage from "./MorePage";
import {TabNavigator} from "react-navigation";
import {defaultStatusBarColor} from "../../config/Config";
export const MainPage = TabNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: {  // 也可以写在组件的static navigationOptions内
            tabBarLabel: '首页',
            tabBarIcon: ({tintColor}) => (
                <Image source={{uri: 'icon_tabbar_homepage'}} style={[{tintColor: tintColor}, styles.icon]}/>),
        }
    },
    Shop: {
        screen: ShopPage,
        navigationOptions: {
            tabBarLabel: '商家',
            tabBarIcon: ({tintColor}) => (
                <Image source={{uri: 'icon_tabbar_merchant_normal'}} style={[{tintColor: tintColor}, styles.icon]}/>),
        }
    },
    Mine: {
        screen: MinePage,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon: ({tintColor}) => (
                <Image source={{uri: 'icon_tabbar_mine'}} style={[{tintColor: tintColor}, styles.icon]}/>),
        }
    },
    More: {
        screen: MorePage,
        navigationOptions: {

            tabBarLabel: '更多',
            tabBarIcon: ({tintColor}) => (
                <Image source={{uri: 'icon_tabbar_misc'}} style={[{tintColor: tintColor}, styles.icon]}/>),

        }
    }
}, {
    animationEnabled: false, // 切换页面时是否有动画效果
    tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
    swipeEnabled: false, // 是否可以左右滑动切换tab
    backBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页)， none 为不跳转
    lazy: false,//开启懒加载
    tabBarOptions: {
        activeTintColor:defaultStatusBarColor,
        inactiveTintColor: '#999999',
        showIcon: true,
        indicatorStyle: {
            height: 0,
        },
        labelStyle: {
            fontSize: 12,
            marginTop: 0,
        },
        style: {
            height: 44,
            backgroundColor: '#FCFCFC',
            // paddingTop:-5  这个完全没有效果
        },
        tabStyle: {
            paddingTop: 2,
        }
    },
});

const styles = StyleSheet.create({
    icon: {
        width: 20,
        height: 20,
    }
});